<template>
      <lib-doc :libDocData="libDocData"></lib-doc>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const libDocData: LibDocInterface = {
            title: '自定义表单组件',
            docList: [
                {
                    label: '引入组件',
                    value: "import { IForm } from 'wd-platform-library'"
                },
                {
                    label: '创建表单对象',
                    type: 'pre',
                    value: `
const dataForm: FormInterFace<DataFormInterFace> = reactive({
        labelWidth: 80, // 表单label宽度
        form: { //存放赋值变量
        },
        fieldDataList: [ //存放表单每一项内容
        ]
}) `
                },
                {
                    label: 'fieldDataList内容',
                    type: 'pre',
                    value: `
{
    //type类型:
    //input  输入框
    //inputNumber 数字输入框
    //textarea   多行文本框
    //checkbox   复选框
    //radio      单选框
    //select     下拉菜单
    //rangePicker 时间选择器
    //datePicker  时间选择器
    //cascader    多级下拉菜单
    //treeSelect  树形下拉菜单
    //checkBoxSelect 下拉复选框
    type: 'input', // form表单类型:
    label: '应用ID', // 字段描述信息
    field: 'appId', // 对应form内赋值字段
    callback:()=>{}, //change回调
    placeholder:"",//提示文字,默认为label
    width: 12,//多列配置
    rules: [ //自定义验证
        {
            //必填验证
            required: true,
            message: '请输入应用ID',
            trigger: 'blur'
        },
        {
            //引用系统正则验证
            //import { RegExpValid, regexpPromiseMsg } from 'wd-platform-utils'
            validator: (rule:RuleObject, value:string) => { 
                return regexpPromiseMsg(RegExpValid.REGEX_MOBILE, value, '手机号不正确')
            },
            trigger: 'blur'
        },
        {
            //自定义验证
            validator: (rule:RuleObject, value:string) => { 
                return value==='' ? "字符串不能为空(自定义失败信息)" : Promise.resolve()
            },
            trigger: 'blur'
        }
    ],
    // 配置antdv自带属性
    options: {
        maxlength: 20
    }
}`
                },
                {
                    label: 'rules注意点',
                    type: 'pre',
                    value: `
        rules: [
            {
                required: true,
                message: '请选择业务线',
                trigger: 'blur',
                // 验证字段类型不加此项默认验证string,如果验证不生效,修改此项
                // type值:array  object  string
                type: 'array'
            }
        ]`
                },
                {
                    label: '提交验证',
                    type: 'pre',
                    value: `
        const onSubmit = () => {
            myForm.value.onSubmit().then((res: any) => {
                console.log(res.form)
                console.log(res.form.name)
            }).catch((err: any) => {
                if (err) {
                    console.log('123')
                }
            })
        }`
                }
            ]
        }
        return {
            libDocData
        }
    },
    methods: {},
    components: { LibDoc }
})
</script>
